<template>
  <div>
    <el-dialog
      title="项目状态变更"
      :visible.sync="statusDialogVisible"
      width="700px"
      :before-close="dialogClose"
      :append-to-body="true"
    >
      <el-form
        :model="statusForm"
        :rules="statusFormRules"
        ref="statusForm"
        class="statusForm"
      >
        <!-- <div class= "tipSty" v-if = "isOpen == 1 ? true :false">（变更申请提交后，可在“项目状态变更审核”中查看进度）</div> -->
        <div class="reminder" v-if="isOpen == 1 ? true : false">
          <i class="el-icon-warning"></i>
          <span>变更申请提交后，可在“项目状态变更审核”中查看进度</span>
        </div>
        <div style="padding: 16px 20px">
          <el-form-item label="当前项目状态：" label-width="135px">
            <span>{{ status }}</span>
          </el-form-item>
          <el-form-item
            label="项目状态更变为："
            prop="newStatus"
            label-width="135px"
          >
            <el-select
              v-model="statusForm.newStatus"
              placeholder="请选择"
              class="optionWidth"
              clearable
              filterable
            >
              <el-option
                v-for="(item, index) of statusOptions.filter((obj) => {
                  return obj.name != status
                })"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            prop="remark"
            label="变更原因说明："
            class="row-padding-bottom"
            label-width="135px"
            :rules="
              isNeedOrdReason == 0
                ? [{ required: false }]
                : statusFormRules.remark
            "
          >
            <el-input
              type="textarea"
              placeholder="请输入变更原因说明"
              v-model="statusForm.remark"
              :rows="2"
              maxlength="200"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item
            label="上传变更附件："
            label-width="135px"
            prop="upLoadFile"
            :rules="
              isNeedFile == 0
                ? [{ required: false }]
                : statusFormRules.upLoadFile
            "
          >
            <uploadAnnex
              style="width: 452px"
              @getFileList="getFileList"
              :limitationFactor="limitationFactor"
              @getFile="getFile"
              :upLoadFile="upLoadFile"
            />
          </el-form-item>
          <el-row>
            <el-col :span="24">
              <uploadResult
                style="margin-left: 130px !important"
                :resultList="upLoadFile"
                @callBackResult="getFile"
              />
            </el-col>
          </el-row>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="dialogClose" class="cancel">取消</el-button>
        <el-button
          type="primary"
          @click.native="saveChangeInfo"
          class="save"
          :loading="canLogin"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: 'projectStatus',
  data() {
    var checkUploadFile = (rule, value, callback) => {
      if (this.upLoadFile.length === 0) {
        return callback(new Error('项目变更附件不能为空'))
      } else {
        callback()
      }
    }
    return {
      statusDialogVisible: true,
      statusForm: {
        newStatus: '',
        remark: '',
        files: '',
        projectId: '',
      },
      status: '',
      upLoadFile: [],
      // statusOptions:[{name:"已开工",code:"1"}],
      limitationFactor: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 5, //自定义上传文件最大数量设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeFour', //自定义上传格式校验类型
        messagetip:
          '要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf格式，附件大小不超过5M', //自定义报错提示语
        fileId: 'salaryExcel', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'salaryExcelForm', //自定义id解决一个页面包含多个上传附件
        methodTip:
          '请上传变更附件，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传5个附件', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
        messageFileSizetip: '最多能上传5M以内的附件',
      },
      oldSrcList: [],
      srcList: [],
      statusFormRules: {
        upLoadFile: [
          {
            required: true,
            validator: checkUploadFile,
            trigger: 'change',
          },
        ],
        remark: [
          {
            required: true,
            message: '变更原因说明不能为空',
            trigger: 'blur',
          },
        ],
        newStatus: [
          {
            required: true,
            message: '项目状态变更不能为空',
            trigger: 'change',
          },
        ],
      },
      canLogin: false,
      isNeedFile: 1,
      isNeedOrdReason: 1,
      isOpen: 0,
    }
  },
  props: {
    projectId: {
      type: String,
      required: true,
    },
    // detailStatus:{
    //     type: String,
    //     required: true
    // }
  },
  computed: {
    ...mapState(['statusOptions']),
  },
  watch: {
    upLoadFile(val) {
      if (val.length > 0) {
        this.$refs.statusForm.clearValidate('upLoadFile')
      }
    },
  },
  async created() {
    // if(this.isWhUser()) {
    await this.getIsNeed()
    // }
    this.getProjectdetail()
    this.getStatus({})
  },
  mounted() {
    // switch(this.detailStatus) {
    //     case 'NOT_STARTED':
    //         this.statusForm.status =  "NOT_STARTED";
    //         this.status = "未开工"
    //         break;
    //     case 'STARTED':
    //         this.statusForm.status =  "STARTED";
    //         this.status = "已开工"
    //         break;
    //     case 'STOPPED':
    //         this.statusForm.status =   "STOPPED";
    //         this.status = "已停工"
    //         break;
    //     case 'COMPLETED':
    //         this.statusForm.status =   "COMPLETED";
    //         this.status = "已竣工"
    //         break;
    //     case 'FINISHED':
    //         this.statusForm.status =   "FINISHED";
    //         this.status = "已完工"
    //         break;
    //     default:
    //         return "--";
    // }
  },
  methods: {
    ...mapActions(['getStatus']),
    getFile(val) {
      this.upLoadFile = val
    },
    getFileList(val) {
      this.oldSrcList.push(val)
      this.srcList.push(val)
    },
    dialogClose() {
      this.$emit('closeStatusDialog')
      this.$refs['statusForm'].resetFields()
    },
    saveChangeInfo() {
      this.$refs['statusForm'].validate((valid) => {
        if (valid) {
          this.canLogin = true
          this.statusForm.files = JSON.stringify(this.upLoadFile)
          this.statusForm.projectId = this.projectId
          this.axios({
            method: 'post',
            url: 'api-p/projectstatus/expand/addProjectStatus',
            data: this.statusForm,
          })
            .then((response) => {
              if (!response.data.hasError) {
                this.$message.success(response.data.msg)
                this.$refs['statusForm'].resetFields()
                console.log(this.statusForm.newStatus)
                this.$emit('successFunc', response.data.result.newStatus)
              } else {
                this.$message.error(response.data.errorMsg)
              }
              this.canLogin = false
            })
            .catch((error) => {
              if (error.response) {
                this.$message.error(error.response.data)
              }
              this.canLogin = false
            })
        } else {
          return false
        }
      })
    },
    getIsNeed() {
      return this.axios({
        method: 'get',
        url: 'api-p/cs/projectstatusauditconfig/getRequiredFields',
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.isNeedFile = response.data.result.isFile
            this.isNeedOrdReason = response.data.result.isReason
            this.isOpen = response.data.result.status
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    getProjectdetail() {
      this.axios({
        method: 'post',
        url: 'api-p/project/expand/projectdetail',
        data: {
          projectId: this.projectId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            var data = response.data.result
            this.status = data.statusDesc
            this.statusForm.status = data.status
          }
        })
        .catch((error) => {
          // this.$message.error("项目信息获取失败");
        })
    },
  },
}
</script>
<style scoped lang="less">
.optionWidth {
  width: 310px !important;
}
.tipSty {
  position: absolute;
  top: 22px;
  left: 140px;
  font-size: 14px;
}
.reminder {
  color: #666;
  font-size: 14px;
  background: #fffbe6;
  line-height: 36px;
  border-radius: 3px;
  padding: 0 20px;
  i {
    color: #ffaa00;
    margin-right: 4px;
    font-size: 20px;
    vertical-align: -2px;
  }
  span {
    color: #ff4d4a;
  }
}
/deep/ .el-dialog__body {
  padding: 0;
}
</style>
